<template>
	<view class="bg-white page">
		<cu-custom bgColor="bg-gradual-orange-main" :isBack="false">
		    <block slot="content">组局列表</block>
		</cu-custom>
		<view class="index_head">
			<view class="cu-bar  search">
				<view class="action text-white" >
					<text class="cuIcon-locationfill text-xsl text-white"></text>
				    <text class="margin-right-sm  " style="font-size: 20rpx;">岳麓区</text>
				    
				</view>
			    <view class="search-form round" style="margin: 0;margin-right: 10rpx;">
			        <text class="cuIcon-search"></text>
			        <input  @blur="InputBlur" :adjust-position="false" v-model="keywords" class="bg-white" type="text" placeholder="关键字"
			            confirm-type="search"></input>
					<text class="cu-btn round  sm bg-orange-dark margin-right-sm">搜索</text>
			    </view>
				 <view class="action">
				        <text  @click="publish" class="cu-btn round  sm bg-yellow  text-red margin-right-sm">我要组局</text>
				        <text  @click="free_match" class="cu-btn round  sm bg-white">自由匹配</text>
				</view>
			</view>
			<view class="head_bg bg-gradual-orange-main"></view>
		</view>

		<view class="new_zuju">
			 <view class="shop-container">
						<!-- 左侧分类列表 -->
				<view class="category-list">
					<view class="category-item"
						:class="{'active': cate_id === 0}"
						@tap="changeCategory(0)">
						<view>全部</view> 
					</view>
					<view class="category-item" style=""v-for="(item, index) in categoryList" 
						:key="index"
						:class="{'active': cate_id === item.id}"
						@tap="changeCategory(item.id)">
						<view>{{item.cate_name}}</view> 
					</view>
				</view>
				<!-- 右侧商家列表 -->
				<scroll-view class="shop-list"  scroll-y  @scrolltolower="loadMore">
					 <block v-if="group_list.length > 0">
						<navigator :url="'/pages/shop/group_detail?order_id=' + item.id"  class="group_item flex"  v-for="(item,index) in group_list" :key="index">
							<image class="shop_img" :src="item.merchant.thumb" mode="aspectFill"></image>
							<view class="position_realtive" style="flex: 1;">
								<view class="flex  align-center justify-between">
									<view class="room_title text-bold">{{item.cassette.name}}</view>
									<view class="text-right">
										<view class="shop_title">{{item.merchant.name}}</view>
										<view  style="font-size: 20rpx;margin-top: 10rpx;"> <i class="cuIcon-locationfill text-orange-dark  margin-right-xs"></i> {{item.distance||0}}Km</view>
									</view>
								</view>
								<view class="flex margin-top-xs">
									<view class="num_btn">{{item.max_people}}人局</view>
									<view class="game_btn">{{item.play_mode}}</view>
								</view>
								<view class="flex align-center margin-top-sm">
									<i class="cuIcon-time margin-right-xs"></i>
									<view class="game_time">{{item.start_time}}</view>
								</view>
								<view class="head_container">
								  <!-- 红色区域 -->
								  <view class="red-area">
									<text class="label">{{item.requirements || ''}}</text>
								  </view>
								  <!-- 黄色区域 -->
								  <view class="yellow-area">
									<text class="label">Go</text>
								  </view>
								</view>
								<view class="position_absolute  join_member">
									<view class="flex align-center">
										<view class="cu-avatar-group flex align-center">
										    <image v-for="(user,index) in item.members" 
											key="index" class="cu-avatar round sm"
											:src="user.avatar" mode="aspectFill">
											</image>
								
										</view>
										<view>{{item.join_people || 0}} / {{item.max_people || 0}}</view>
									</view>
								</view>
							</view>
							
						</navigator>
					 </block>
					 <view class="loading-text" v-if="loading">加载中...</view>
					 <view class="loading-text" v-if="noMore">没有更多了</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMechantCate, getGroupList } from '@/api/merchant.js';
	export default {
		data() {
			return {
	
					currentCategory: 0,
					categoryList:[],
					keywords : '',
					cate_id: 0,
					page: 1, // 当前页码
					pageSize: 10, // 每页条数
					loading: false, // 是否正在加载
					noMore: false, // 是否没有更多数据
					group_list:[]
            
			}
		},
		onLoad() {
			  this.initData(); // 初始化数据
		},
		methods: {
			// 初始化数据
			async initData() {
			  await this.getCategoryList(); // 获取分类列表
			  await this.groupList(); // 获取商家列表
			},
			// 获取分类列表
			async getCategoryList() {
			  const res = await getMechantCate();
			  this.categoryList = res.data;
			},
			InputBlur : (e)=>{
				//搜索触发
				console.log(e)
			},
			// 切换分类
			changeCategory(cate_id) {
			  this.cate_id = cate_id; // 更新分类ID
			  this.page = 1; // 重置页码
			  this.noMore = false; // 重置没有更多数据的状态
			  this.group_list = []; // 清空商家列表
			  this.groupList(); // 重新加载数据
			},
			// 加载更多
			loadMore() {
			  if (!this.noMore && !this.loading) {
			    this.groupList(); // 加载更多数据
			  }
			},
			// 获取组局列表
			async groupList() {
			  if (this.noMore || this.loading) return; // 防止重复加载
			
			  this.loading = true; // 开始加载
			
			  const res = await getGroupList({
			    page: this.page,
			    pageSize: this.pageSize,
			    cate_id: this.cate_id,
				keywords: this.keywords
			  });
			
			  if (res.data.length > 0) {
			    this.group_list = this.page === 1 ? res.data : [...this.group_list, ...res.data]; // 追加数据
			    this.page++; // 页码增加
			  } else {
			    this.noMore = true; // 没有更多数据
			    if (this.page === 1) {
			      this.group_list = []; // 如果第一页没有数据，清空列表
			    }
			  }
			
			  this.loading = false; // 结束加载
			},
			goToShop(shop) {
				uni.navigateTo({
					url: `/pages/shop/detail?id=${shop.id}`
				})
			},
			publish (){
				//组局发布页面
				uni.navigateTo({
					url:'/pages/group/publish'
				})
			},
			free_match(){
				//自有匹配
				uni.navigateTo({
					url:'/pages/group/free_match'
				})
			}
		}
	}
</script>

<style scoped>
	.page{
		width: 100%;
		height: 100%;
	}
	.head_bg{
		height: 144rpx;
		width: 100%;
	}
	.index_head{
		position: relative;
		
	}
	.group_item{
		background: #fff;
		padding: 10rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.search{
		position: absolute;
		top: 26rpx;
		z-index: 1;
		width: 100%;
	}
	.cu-bar .search-form{
		height: 72rpx;
		line-height: 72rpx;
	}
	.index_title{
		position: absolute;
		top: 180rpx;
		left: 54rpx;
		font-size: 85rpx;
		color: rgba(255, 255, 255, 1);
		letter-spacing:3rpx;
		z-index: 1;
	}
	.index_title_sub{
		position: absolute;
		z-index: 1;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		left: 66rpx;
		top: 300rpx;
	}
	.nav_img{
		width: 85rpx;
		height: 85rpx;
	}
	.cu-list.grid.no-border>.cu-item{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.divider{
		height: 10rpx;
		background: rgba(244, 244, 244, 1);
	}
	.new_zuju{

		padding-top: 32rpx;
		padding-left:0 ;
		padding-right: 0rpx;
		
	}
	.cart_title{
		text-align: center;
		font-size: 34rpx;
		color: rgba(51, 51, 51, 1);
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24rpx;
	}
	.cart_title .dot_short{
		width: 8rpx;
		height: 18rpx;
		border-radius: 6rpx;
		transform: rotate(90deg);
		background: linear-gradient(180deg, rgba(254, 94, 41, 1) 0%, rgba(254, 118, 4, 1) 100%);
	}
	.cart_title .cart_word{
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.shop-container {
		display: flex;
		height: 100%
	}

.category-list {
    width: 150rpx;
    background-color: #f8f8f8;
}

.category-item {

	height: auto;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    position: relative;
	padding: 40rpx 0;
	display: flex;flex-direction: column;align-items: center;
}


.category-item.active {
    background-color: #fff;
    color: #FE5E29;
    font-weight: bold;
}


.shop-list {
    flex: 1;
    background-color: rgb(241,241,241);
    padding-top: 20rpx;
}

.shop-list .shop_img{
	width: 192rpx;height: 250rpx;margin-right: 8rpx;border-radius: 10rpx;
}

.shop-list .room_title{
	font-size: 26rpx;
	color: rgba(51, 51, 51, 1);
}

.shop-list .shop_title{
	font-size: 20rpx;
	color: rgba(51, 51, 51, 1);
}

.shop-list .num_btn{
	border-radius: 5rpx;
	background: rgba(228, 59, 62, 1);
	color: #fff;
	padding: 5rpx 15rpx;
	font-size: 24rpx;
	margin-right: 12rpx;
}
.shop-list .game_btn{
	background: rgba(255, 235, 59, 1);
	border-radius: 5rpx;
	padding: 5rpx 15rpx;
	font-size: 24rpx;
	color: rgba(212, 48, 48, 1);
}
.game_time{
	color: rgba(51, 51, 51, 1);
	font-size: 24rpx;
}
.head_container {
	  display: flex;
	  height: 82rpx; /* 根据需要调整高度 */
	  overflow: hidden; /* 隐藏超出部分 */
	  margin-top: 25rpx;
	}
	
	.red-area {
	  flex: 2;
	  background: linear-gradient(90deg, rgba(255, 132, 3, 1) 0%, rgba(254, 60, 50, 1) 100%); /* 红色 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  color: #fff;
	  font-size: 24rpx;
	  padding-left: 20rpx;
	  border-top-left-radius: 10rpx;
	  border-bottom-left-radius: 10rpx;
	}
	
	.red-area .label {
		margin-right: 10rpx;
	}
	.red-area .or_price{
		font-size: 20rpx;
		text-decoration: line-through;
	}
	
	.red-area::after {
	  content: '';
	  position: absolute;
	  right: -30px; /* 控制三角形的位置 */
	  top: 0;
	  width: 0;
	  height: 0;
	  border-top: 20px solid transparent; /* 上半部分三角形 */
	  border-bottom: 30px solid transparent; /* 下半部分三角形 */
	  border-left: 30px solid rgba(254, 60, 50, 1); /* 三角形宽度和颜色 */
	}
	
	.yellow-area {
	  flex: 1;
	  background-color: rgba(255, 228, 95, 1); /* 黄色 */
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  color: rgba(228, 59, 62, 1);
	  font-size: 30rpx;
	  padding-left: 40rpx;
	  border-top-right-radius: 10rpx;
	  border-bottom-right-radius: 10rpx;
	}
	.join_member{
		border-radius: 13px 0px, 0px, 13px;
		background: rgba(255, 235, 232, 1);
		font-size: 22rpx;
		color: rgba(228, 59, 62, 1);
		padding: 10rpx 0;
		padding-right: 10rpx;
		right : -10rpx;
		top : 80rpx;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		
	}
	.loading-text {
	  text-align: center;
	  font-size: 24rpx;
	  color: #999;
	  padding: 20rpx 0;
	}
</style>